<template>
    <h1>Hello</h1>
    姓名：<input type="text" v-model="person.name"><br/>
    年龄：<input type="text" v-model="person.age"><br/>
    性别：<input type="text" v-model="person.gender"><br/>
    <!-- <div>
        {{ person.name }} | {{ person.age }} | {{ person.gender }}
    </div> -->
    <div :ref="(el)=>rFullName = el">{{ fullName }}</div>
    <div class="full-name" ref="rv1">{{ v1 }}</div> <button @click="changeV1">修改v1</button>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showFullName">打印fullName</button>
</template>

<script setup lang="ts" name="Person001">
    import { ref, reactive, computed, watch, watchEffect,defineExpose } from 'vue'
    let p = {
        name:'张三',
        gender:'男',
        age:20,
        tel:1888888888
    }
    // OK
    // let person = reactive(p)
    let person = reactive(p)

    let v1 = ref('hello world.....')
    let rFullName = ref()
    let rv1 = ref()

    function changeName() {
        console.log(person, p)
        person.name = '李四'
    }
    function changeAge() {
        person.age += 1;
    }
    function showTel() {
        alert(person.tel)
    }

    function showFullName() {
        console.log(rFullName);
        
    }

    function changeV1() {
        v1.value = "菲律宾离南海也很近"
        console.log('修改之前', rv1, rv1.value)
        // rv1.value.style.color = 'red'
        rv1.value.className = 'v1'
        console.log('修改之后', rv1, rv1.value)
    }

    let fullName = computed(()=>{
        return person.name + '|' + person.age + '|' + person.gender
    })

    watch(v1, (newVaue, oldValue)=>{
        console.log("v1已经修改", newVaue, oldValue)
    })

    /* watch(person, (newVaue, oldValue)=>{
        console.log("person已经修改", newVaue, oldValue)
    })

    watch(()=>person.name, (newVaue, oldValue)=>{
        console.log("person.name已经修改", newVaue, oldValue)
    }) */

    /* watch([()=>person.name, ()=>person.age], (newVaue, oldValue)=>{
        console.log("person.name已经修改", newVaue, oldValue)
    }, {deep:true, immediate:true}) */

    const stopWatch = watchEffect(()=>{

        console.log("watchEffect person", person)

        if (person.name === '李四') {
            console.log("姓名修改为：", person.name)
        }
        if (person.age === 25) {
            console.log("年龄修改为：", person.age)
            stopWatch()
        }
    })

    defineExpose({person})
        
</script>
<style scoped>
    .full-name{
        background-color: skyblue;
        font-size: medium;
    }
    .v1{
        background-color: rgba(58, 206, 48, 0.381);
        font-size: medium;
    }
    
</style>
